<template>
  <div class="App-container">
    <Header :isScrollTop="isScrollTop"/>
    <div id="main-container" class="main-container" @scroll="handleScroll">
      <router-view v-slot="{ Component }">
        <transition mode="out-in" name="slide-fade">
          <keep-alive>
            <component :is="Component"/>
          </keep-alive>
        </transition>
      </router-view>
    </div>
    <button :style="{ bottom: showTopButton ? '100px' : '-100px' }" class="top-button" title="Back to top" @click="scrollToTop">👆</button>
  </div>
</template>

<script lang="ts" setup>
import Header from "@/components/Header/index.vue";
import {ref} from "vue";
import {debounce} from "@/utils/util";

const isScrollTop = ref(true);
const showTopButton = ref(false);
const handleScroll = debounce((e: any) => {
  isScrollTop.value = e.target.scrollTop === 0;
  showTopButton.value = e.target.scrollTop > 200;
}, 100); // 100 毫秒为 throttle 的间隔时间
function scrollToTop() {
  const dom: HTMLElement | null = document.getElementById("main-container")
  if (dom) {
    dom.scrollTo({top: 0, behavior: "smooth"});
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variable.module";

.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999;
  transform: translate(-50%, -50%);
}

.top-button {
  position: fixed;
  right: 100px;
  z-index: 999;
  font-size: 20px;
  width: 50px;
  height: 50px;
  border: none;
  outline: none;
  background-color: #5b39c9;
  color: white;
  cursor: pointer;
  border-radius: 50%;
  transition: all .5s;

  &.show {
    display: block;
  }

  &:hover {
    background-color: #32c489;
  }
}

:deep(.el-loading-mask) {
  z-index: 900;
}

:deep(.el-loading-spinner .path) {
  stroke: #363b5f;
}

/* 隐藏滚动条 */

.App-container {
  width: 100vw;
  height: 100vh;
  color: aliceblue;
  animation: start 0.5s ease-in-out;
  position: relative;

  .main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth; /* 添加这行 */
    transition: all .5s;

    &::-webkit-scrollbar {
      width: 0;
    }
  }
}

.slide-fade-enter-active {
  transition: all 0.4s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
}

@keyframes start {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
</style>
